<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    // 函数。 用关键字function修饰()内是参数
    function myFun() {
        console.info('hello world')
    }

    function add(a, b) {
        return a + b;
    }
    myFun();
    console.info(add(3, 5))

    // 当页面加载完成时执行这个函数
    window.onload = function () {
        // 获取HTML中id为"square"的元素
        var squareElement = document.getElementById('square');
        // 计算一个数的平方
        var number = 5;
        var square = number * number;
        // 将计算结果显示在页面上
        squareElement.textContent = 'The square of ' + number + ' is ' + square;
    };
</script>

<body>
    <p>平方</p>
    <p id="square"></p>

    <h2>圆的面积计算器</h2>

    <p>请输入圆的半径：</p>
    <input type="number" id="radius" value="5">
    <button onclick="calculateArea()">计算面积</button>

    <p>圆的面积是：<span id="area">?</span></p>

    <p>请输正方形的宽：</p>
    <input type="number" id="width" value="6">
    <button onclick="calculateSquare()">计算面积</button>
    <span id="areaSquare">?</span>

</body>

<script>
    function calculateArea() {
        // 获取半径
        var radius = document.getElementById("radius").value;
        // 将输入的字符串转换为数字
        radius = parseFloat(radius);
        // 使用Math.PI和Math.pow函数计算面积
        var area = Math.PI * Math.pow(radius, 2);
        // 显示结果
        document.getElementById("area").innerText = area.toFixed(2); // 保留两位小数
    }

    function calculateSquare() {
        // 从页面中获取输入
        let width = document.getElementById('width').value
        console.info(typeof width)
        width = parseInt(width)
        document.getElementById('areaSquare').innerText = width * width
    }

    // 作用域

    var name = "A"
    function test_var() {
        if (false) {
            var name = "B"
        }
        console.log("------> ", name) // ⭐️⭐️ undefined。 声明提升导致的异常。所以建议用let。
    }
    test_var();

    var i = '全局变量'
    function local() {
        i = '函数内的变化'
        let j = '局部变量'
        var n = "方法内声明的var";
        console.log('局部的i', i, '局部的j', j, n)
    }
    local()
    console.log(i)
    console.log(n)
    // console.log(j) //  j is not defined

    console.log(k) // undefined
    var k;
    console.log(l) // 后面有let l;声明 -- Cannot access 'l' before initialization
    // let l; // l is not defined 。 可以看出let 与var还是有差异的。
    console.log(n)
    // var 与 let 的差异2>--》变量提升：var声明的变量会发生变量提升（即可以在声明之前访问变量，值为undefined），而let不会。

</script>

</html>